<template>
	<view class="container">
		<!-- <tui-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#0C83CC" sliderBgColor="#0C83CC"
		 @change="change"></tui-tabs> -->
		<!-- 接龙案例 -->
		<view :class="{'tui-order-list':scrollTop>=0}" >
			<view class="tuiTips" style="margin-top: 40%;" v-if="rareData.length == 0" >
				<tui-tips :fixed="false" imgUrl="/static/toast/img_nodata.png">暂时还没有内容</tui-tips>
			</view>
			<view v-if="tabStatus == 0" class="case">
				<view class="case_box">
					<view v-if="rareData" class="istarted" v-for="(item, index) in rareData" :key="index">
						<view class="istarted_top">
							<view class="istarted_top_left">
								<view class="istarted_top_left_top">
									<image v-if="item.imageurl" :src="item.imageurl"></image>
									<image v-else src="../../static/my/my_one.png" style="background: #CFCFCF;" mode="widthFix"></image>
								</view>
								<view class="istarted_top_left_bottom">
									<view class="istarted_top_left_bottom_top">
										{{item.nickname}}
									</view>
									<view class="istarted_top_left_bottom_bottom">
										{{formatDate(item.create_time)}}
									</view>
								</view>
							</view>
							<view class="istarted_top_right">
								<view v-if="item.status == 1" style="color:#1193E3;">
									接龙进行中
								</view>
								<view v-else style="color:#999999;">
									接龙已结束
								</view>
							</view>
						</view>
						<view class="istarted_inthe_top">
							{{item.title}}
						</view>
						<view class="istarted_inthe_bottom">
							<view class="istarted_inthe_bottom_top">
								<view>
									销售订单：{{item.pre_sell_count ? item.pre_sell_count : '0' }}
								</view>
								<view>
									积累佣金：{{centsToYuan(item.pre_sell_comm ? item.pre_sell_comm : '0' )}}
								</view>
							</view>
							<view class="istarted_inthe_bottom_bottom">
								<view>
									销售金额：{{centsToYuan(item.pre_sell_amount ? item.pre_sell_amount : '0' )}}
								</view>
								<view>
									帮卖佣金：{{tui.rate(item.jielong_sell_comm ? item.jielong_sell_comm : '0' )}}%
								</view>
							</view>
						</view>
						<view class="istarted_bottom">
							<view v-if="item.status == 1" @click="shareEvn(item.share_img,item.id,item.title)" class="istarted_bottom_3">
								<image src="../../static/my/wei.png"></image>分享
							</view>
							<view @click="details('../index/income_details?id='+item.id)" class="istarted_bottom_1">
								收入明细
							</view>
						</view>
					</view>
					<view v-else class="log_tishi">
						<image src="../../static/my/cannotfind.png"></image>
					</view>
				</view>
			</view>
			<view v-else class="content_view">
				<view class="content_list">
					<view class="frame" v-for="(item, index) in rareData" :key="index">
						<view class="frame_left">
							<image v-if="item.imageurl" :src="item.imageurl"></image>
							<image v-else src="../../static/my/my_one.png" style="background: #CFCFCF;" mode="widthFix"></image>
						</view>
						<view class="frame_right">
							<view class="frame_right_top">
								<view class="frame_right_top_name">{{item.nickname}}</view>
								<view class="frame_right_top_time">{{formatDate(item.create_time)}}加入</view>
							</view>
							<view class="frame_right_bottom">
								团长：{{item.follow_nickname}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<!-- 接龙案例 -->
		
		<!-- 分享弹窗-->
		<view class="share-pro" >
			<view class="share-pro-mask-share" v-if="deliveryFlag" @click="closeShareEvn"></view>
			<view class="share-pro-dialog" :class="deliveryFlag?'open':'close'" >
				<view class="share-pro-title">分享接龙</view>
				<view class="share-pro-body">
					<view class="share-item">
						<button open-type="share" style="background: #FFF !important;">
							<image src="/static/my/wei.png" class="share-icon" mode="widthFix"></image>
							<view class="share-pro-title-text">分享给好友</view>
							<view  style="color: #FFFFFF;">~</view>
						</button>
					</view>
					<view class="share-item" @click="goodsData_url()">
						<image src="/static/my/quan.png" class="share-icon" mode="widthFix"></image>
						<view class="share-pro-title-text">生成海报</view>
						<view class="share-pro-title-text-des">(可分享到朋友圈)</view>
					</view>
				</view>
				<view class="shareCancel"  @tap="closeShareEvn">
					<view class="shareCancelBut">
						取消
					</view>
				</view>
			</view>
		</view>
		<!-- 分享弹窗-->
		
		<!-- 生成海报 -->
		<view class="flex_row_c_c modalView" :class="qrShow?'show':''" @tap="hideQr()">
			<view class="flex_column">
				<view class="backgroundColor padding1vh border_radius_10px">
					<image :src="poster.finalPath || ''" mode="widthFix" class="posterImage"></image>
				</view>
				<view class="flex_row marginTop2vh">
					<button type="primary" class="shareBtu" size="mini" @tap.prevent.stop="saveImage()">保存图片</button>
				</view>
			</view>
		</view>
		<view class="hideCanvasView">
			<canvas class="hideCanvas" canvas-id="default_PosterCanvasId" :style="{width: (poster.width||10) + 'px', height: (poster.height||10) + 'px'}"></canvas>
		</view>
		<!-- 生成海报 -->
		
		<!--加载loadding-->
		<tui-loadmore :visible="loadding" :index="3" type="red" v-if="empty == 1"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" v-if="empty == 1"></tui-nomore>
		<!--加载loadding-->
		
		<!-- 接龙案例 -->
		<button open-type="getUserInfo"  v-if="userInfo === ''" class="tui-login-full" @getuserinfo="wxGetUserInfo" withCredentials="true" lang="zh_CN"></button>
		<view class="tui-safearea-bottom"></view>
		<!-- 接龙案例 -->
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
		
		<!-- 灰色阴影 -->
		<view class="msgbox" v-if="deliveryFlage == true"></view>
		<!-- 灰色阴影 -->
	</view>
</template>
<script>
	const dataTime = require('../../utils/util.js');

	import tuiListView from "@/components/list-view/list-view"
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiCard from "@/components/card/card"
	import tuiToast from "@/components/extend/toast/toast"
	import tuiTips from "@/components/extend/tips/tips"
	
	import _app from '@/components/QS-SharePoster/app.js';
	import {getSharePoster} from '@/components/QS-SharePoster/QS-SharePoster.js';
	
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiListView,
			tuiListCell,
			tuiCard,
			tuiToast,
			tuiTips
		},
		props: {
			//点击遮罩 是否可关闭
			maskClosable: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				tabs: [
					{
						name: "可参与的帮卖"
					}, 
					{
						name: "我的邀请列表"
					},
				],
				tabStatus: 0,
				currentTab: 0,
				userInfo: '',
				current: 0,
				banner: [
					"1.png",
					"2.png",
				],
				userCount: 0,
				statusList: [],
				rareData: [],
				page: 1,
				loadding: false,
				pullUpOn: true,
				empty: 1,
				scrollTop: 0,
				orderInfo: {
					orderTotal:{2:0,3:0},	
					account:{balance:0},
				},
				username: [],
				height: 0,
				top: 0,
				tabletop: '社群主页',
				operation: true,
				deliveryFlag: false,
				share_img: '',
				parm_id: '',
				title: '',
				goodsData: [],
				poster:{
					avatar: '',
					QrCode:'https://jlapi.ssddjj.com/upload/h5/hch-code.png',
					title: '',
					describe:'',
					nickname: '',
					dateTime: '2分钟前 发布',
					price: '',
				},
				qrShow: false,
				goodsData: '',
				goods_files: '',
				erweixin: '',
				canvasId: 'default_PosterCanvasId',
			}
		},
		onLoad:function(option){
			
			this.userInfo = uni.getStorageSync('userInfo');
			if(this.userInfo){
				this.loadData();
			}else{
				this.empty = 0
				this.loadding = false
				this.pullUpOn = false
			}
		},
		methods: {
			// 过滤特殊字符
			filtration_special:function(nickname){
				var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
				if(regStr.test(nickname)){
					console.log('过滤',nickname.replace(regStr,""));
					return nickname.replace(regStr,"");
				}else{
					return nickname;
				}
			},
			hideQr() {
				this.qrShow = false;
			},
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.poster.finalPath,
					success(res) {
						_app.showToast('保存成功');
					},
					fail: function(err) {
					  if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
						// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
						uni.showModal({
						  title: '提示',
						  content: '需要您授权保存相册',
						  showCancel: false,
						  success: modalSuccess => {
							uni.openSetting({
							  success(settingdata) {
								if (settingdata.authSetting['scope.writePhotosAlbum']) {
								  uni.showModal({
									title: '提示',
									content: '获取权限成功,再次点击图片即可保存',
									showCancel: false,
								  })
								} else {
								  uni.showModal({
									title: '提示',
									content: '获取权限失败，将无法保存到相册哦~',
									showCancel: false,
								  })
								}
							  },
							  fail(failData) {
								  
							  },
							  complete(finishData) {
								  
							  }
							})
						  }
						})
					  }
					
					}
				})
				// #endif
				// #ifdef H5
				_app.showToast('保存了');
				// #endif
			},
			goodsData_url: function(){
				this.tui.request('jielong/sellJielong',{
					jielong_id : this.parm_id
				}).then((res) => {
					console.log('这是会眨巴',res)
					if(res.code == '0000'){
						this.shareFc(res.info);
					}else{
						let params = {
							title: res.msg,
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						this.$refs.toast.show(params);
					}
				}).catch((err) => {
					console.log('aaaa', err)
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			// 点击事件
			change: function(e) {
				this.currentTab = e.index
				if(!this.userInfo){
					return false
				}
				this.page = 1
				this.loadding = false
				this.pullUpOn = true
				this.rareData = []
				this.setTab(e.index)
				this.loadData();
			},
			// 改状态
			setTab: function(index){
				if(index == 0){
					this.tabStatus = 0;
				}else if(index == 1){
					this.tabStatus = 1;
				}
			},
			centsToYuan: function(amount){
				return this.tui.centsToYuan(amount);
			},
			// 分享
			onShareAppMessage: function(){
				this.closeShareEvn();
				console.log(this.userInfo);
				console.log(this.share_img);
				console.log(this.parm_id);
				var share_img = 'https://jlapi.ssddjj.com/upload/' + this.share_img;
				var path = '/pages/dragon/details?id='+this.parm_id+'&s_uid='+this.userInfo['user_id'];
				console.log(path);
				return {
					title: this.userInfo.nickname + "邀请您参与 " + this.title,
					path: path,
					imageUrl: share_img,
				}
			},
			// 关闭分享弹窗
			closeShareEvn:function() {
				this.deliveryFlag = false;
				this.operation = true;
			},
			// 分享弹窗
			shareEvn:function(share_img,parm_id,title) {
				// console.log(2222);
				this.share_img = share_img;
				this.parm_id = parm_id;
				this.title = title;
				this.operation = false;
				this.deliveryFlag = true;
			},
			status: function(status){
				return {status: status}
			},
			back: function(){
				uni.navigateBack();
			},
			toAmount: function(amount){
				let fee = this.tui.centsToYuan(amount);
				return fee.toFixed(2);
			},
			loadData: function(){
				if(this.tabStatus == 0){
					var url = 'user/shareSellJielong';
					var array = {page_size: 5 ,page:this.page};
				}else{
					var url = 'user/fansList';
					var array = {'type' : 'share'};
				}
				this.loadding = true;
				this.tui.request(url,array).then((res) => {
					console.log(res)
					if(res.list.list.length > 0){
						this.loadding = false
						this.pullUpOn = true
						this.empty = 1
						this.page++
						this.userCount = res.userCount
						this.statusList = res.statusList
						for( let i = 0; i < res.list.list.length; i++ ){
							this.rareData.push(res.list.list[i])
						}
					}else{
						this.loadding = false
						this.pullUpOn = false
					}
					if(res.list.list.length == 0 &&  this.page == 1){
						this.empty = 0
					
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
			formatDate: function (timestamp) {
				return dataTime.getDateDiff(timestamp);
				// return {text: dataTime.formatDate('m-d',timestamp)}
			},
			formatDatetime: function (timestamp) {
				// return {text: dataTime.getDateDiff(timestamp)}
				var timestamp = dataTime.getDateDiff(timestamp);
				return timestamp;
			},
			price: function(amount){
				return {text: '￥' + this.tui.centsToYuan(amount).toFixed(2),color:'#f7374f', size:'32'}
			},
			nickname: function(nickname){
				return {text: nickname};
			},
			imageurl: function(image){
				return {url: image};
			},
			details: function(url,type) {
				if(!url){
					return false
				}				
				if(type == 1){
					uni.switchTab({
						url: url
					});
					return false
				}
				if(url == 'special'){
					getApp().globalData.currentTab = '1';
					uni.navigateTo({
					    url:'../dragon/myorder',
					});
				}else{
					uni.navigateTo({
					   url: url,
					});
				}
			},
			wxGetUserInfo: function() {
				let that = this;
				that.tui.wxLogin().then((res)=>{
					if(res.code == '0000'){
						that.userInfo = res;
						that.getAccount();
						this.loadData();
					}
				});
			},
			// 海报开始
			async shareFc(res) {
				this.goodsData = res;
				this.goods_files = JSON.parse(this.goodsData['details']);
				console.log(this.goods_files);
				if(this.goodsData['qrcode']){
					this.erweixin = 'https://jlapi.ssddjj.com/upload/' + this.goodsData['qrcode'];
				}
				this.operation = true
				// this.canvasFlag=false;//显示canvas海报
				this.deliveryFlag = false;//关闭分享弹窗
				try {
					_app.log('准备生成:' + new Date())
					const d = await getSharePoster(
					{
						_this: this, //若在组件中使用 必传
						type: 'testShareType',
						formData: {
							//访问接口获取背景图携带自定义数据
			
						},
						posterCanvasId: this.canvasId,	//canvasId
						delayTimeScale: 20, //延时系数
						background: {
							width: 1080,
							height: 1920,
							backgroundColor: '#FFF'
						},
						backgroundImage: 'none',
						drawArray: ({
							bgObj,
							type,
							bgScale
						}) => {
							const dx = bgObj.width * 0.3;
							const fontSize = bgObj.width * 0.045;
							const lineHeight = bgObj.height * 0.04;
							console.log(this.erweixin);
							//可直接return数组，也可以return一个promise对象, 但最终resolve一个数组, 这样就可以方便实现后台可控绘制海报
							return new Promise((rs, rj) => {
							
								rs([
									{
										
										type: 'image',
										url: this.tui.exchange_image(this.goods_files['goods_images'][0],'big'),
										dx: 0,
										dy: 0,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.53 / imageInfo.height;
											let height = bgObj.width * 0.5 > 300 ? 300 : bgObj.width * 0.5;
											if(imageInfo.width > bgObj.width ){
												scale = bgObj.width / imageInfo.width;
												height = imageInfo.height * scale > 300 ? 300: imageInfo.height * scale
											}
											return {
												dWidth: 1080, // 因为设置了圆形图片 所以要乘以2
												dHeight: 1080
											}
										}
									},
									{
										type: 'view',
										// background: '#666',
										background: 'linear-gradient(#ff0000, #00ff00, #0000ff)',
										infoCallBack(textLength) {
											return {
												dx: 0,
												dy: 1080,
												dWidth: 1080,
												dHeight: 40
											}
										},
									},
									{
										type: 'image',
										url: this.userInfo.imageurl,
										dx: 40,
										dy: 1135,
										Float: 'left',
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.08 / imageInfo.height;
											return {
												dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.08,
											}
										}
									},
									{
										type: 'text',
										text: this.filtration_special(this.userInfo.nickname) + ' 推荐你来接龙',
										size: fontSize - 5,
										color: '#666',
										textAlign: 'left',
										infoCallBack(textLength) {
											return {
												dx: 160,
												dy: 1180
											}
										},
									},
									{
										type: 'text',
										// fontStyle: 'italic',
										text: this.filtration_special(this.goodsData['title']),
										size: fontSize + 10,
										color: '#000',
										// alpha: .5,
										// textAlign: 'left',
										// textAlign: 'center',
										width: 1000,
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: bgObj.width - 90,
											lineHeight: 75,
											lineNum: 2,
											dx: -1
										},
										// textBaseline: 'middle',
										infoCallBack(textLength) {
											return {
												dx: 40,
												dy: 1290,
												Width: 1000
											}
										},
										serialNum: 0,
										id: 'tag1'	//自定义标识
									},
									{
										type: 'text',
										text: this.filtration_special(this.goods_files['text']).replace(/[\r\n]/g, ""),
										size: fontSize - 5,
										color: '#666',
										width: 1000,
										alpha: 1,
										textAlign: 'left',
										textBaseline: 'middle',
										lineFeed: {
											maxWidth: bgObj.width - 90,
											lineHeight: 60,
											lineNum: 3,
											dx: -1
										},
										infoCallBack(textLength) {
											return {
												dx: 40,
												dy: 1450,
												Width: 1000
											}
										}
									},
									{
										type: 'image',
										url: this.erweixin,
										dx: bgObj.width * 0.75,
										dy: bgObj.height - 250,
										infoCallBack(imageInfo) {
											let scale = bgObj.width * 0.2 / imageInfo.height;
											return {
												// circleSet: {
												// 	x: imageInfo.width * scale / 2 + 50,
												// 	y: bgObj.width * 0.2 / 2 + 50,
												// 	r: bgObj.width * 0.2 / 2 + 50
												// },
												dWidth: imageInfo.width * scale, // 因为设置了圆形图片 所以要乘以2
												dHeight: bgObj.width * 0.2,
												/* roundRectSet: { // 圆角矩形
													r: imageInfo.width * .1
												} */
											}
										}
									},
									{
										type: 'text',
										text: '微信卖货赚钱马上就用接龙小达人',
										size: fontSize - 5,
										color: '#666',
										// textAlign: 'center',
										width: '100%',
										infoCallBack(textLength) {
											return {
												dx: 40,
												dy: bgObj.height - 60,
												dWidth: 1080
											}
										},
									},
								]);
							})
						},
						setCanvasWH: ({
							bgObj,
							type,
							bgScale
						}) => { // 为动态设置画布宽高的方法，
							this.poster = bgObj;
						}
					});
					_app.log('海报生成成功, 时间:' + new Date() + '， 临时路径: ' + d.poster.tempFilePath)
					this.poster.finalPath = d.poster.tempFilePath;
					console.log(this.poster);
					this.qrShow = true;
				} catch (e) {
					_app.hideLoading();
					_app.showToast(JSON.stringify(e));
					console.log(e);
				}
			},
		},
		onPullDownRefresh: function() {
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 200);
		},
		onReachBottom: function() {
			if(this.pullUpOn == true){
				this.loadData();
			}
		},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},
		disMove:function(){
		 
		},
	}
</script>

<style lang="scss">
	@import '../../static/style/thorui.css';
	.font-Tag{
		font-weight: 550 !important;
		margin-bottom: 50rpx !important;
	}
	.container {
		/* padding-bottom: 100rpx; */
		color: #333;
		padding-bottom: env(safe-area-inset-bottom);

	}
	.tui-center{
		text-align: center;
	}
	/* 接龙案例 */
	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 30upx 30upx;
		margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
	}
	.case_box_time{
		/* padding-left: 5rpx; */
	}
	.case_box_time_text{
		color: #b1b1b1;
		padding-left: 10rpx;
	}
	.case_box_right{
		color: #1193E3;
		font-weight: 500;
		
	}
	.case{
		/* background: #FFFFFF; */
		padding: 0 30rpx 0 30rpx;
	}
	.case_title{
		font-size: 35rpx;
		font-weight: 700;
		padding-top: 20rpx;
	}
	.case_describe{
		font-size: 28rpx;
		color: #a6a6a6;
		padding-top: 10rpx;
		line-height: 60rpx;
	}
	.case_box{
		padding: 0px 0px 40px 0px;
	}
	.tui-header-right{
		font-weight: 550;
	}
	.tui-header-title{
		font-size: 30rpx !important;
		font-weight: 500;
		margin-top: 0rpx !important;
		color: #000000 !important;
		max-width: 625rpx !important;
		// min-width: 460rpx !important;
	}
	.tui-header-title-time{
		margin-top: 0rpx !important;
		color: #999 !important;
	}
	.tui-header-left view{
		line-height: 50rpx;
		// letter-spacing: 4rpx;
	}
	.tui-title {
		width: 100%;
		padding: 70upx 30upx 30upx 30upx;
		box-sizing: border-box;
		font-size: 30upx;
		line-height: 30upx;
		color: #666;
	}
	.case_box_title{
		padding-left: 20rpx !important;
		// margin: 25rpx auto !important;
		font-weight: 550;
		// padding-bottom: 18rpx;
		// letter-spacing: 4rpx;
		font-size: 35rpx !important;
	}
	.case_boxi_content {
		padding: 0upx 30upx;
		margin: 5rpx auto;
		color: #9e9e9e;
		font-size: 28rpx;
		line-height: 40rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}
/* 	.case_boxi_footer{
		padding: 30upx 20upx;
		color: #f40e2a;
		font-size: 35rpx;
		font-weight: 500;
	} */
	.tui-card{
		margin: 0rpx !important;
		margin-top: 20rpx !important;
		box-shadow: 0 0 3rpx #eee !important;
		border: 1rpx solid #f5f5f5 !important;
	}
	.tui-header-thumb{
		border-radius: 10% !important;
		width: 90rpx !important;
		height: 90rpx !important;
	}
	/* 接龙案例 */

	/* category */

	.tui-product-category {
		padding: 10rpx 20rpx 60rpx 20rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		font-size: 24rpx;
		color: #555;
		/* margin-bottom: 20rpx; */
		margin: 0px auto;
		width: 100%;
	}

	.tui-category-item {
		width: 25%;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
		padding-top: 50rpx;
	}

	.tui-category-img {
		height: 100rpx;
		width: 100rpx;
		display: block;
	}

	.tui-category-name {
		line-height: 0rpx;
		// font-weight: 500;
		color: #000;
		font-size: 28rpx !important;
	}
	.tui-category-width{
		margin: 0px auto;
		background: #FFFFFF;
		width: 100%;
		/* margin-top: 30rpx; */
		// letter-spacing: 3rpx;
		/* font-weight: 500; */
	}
	/* category */
	
	.istarted{
		width: 95%;
		background: #FFF;
		margin: 0 auto;
		padding: 20rpx;
		margin-top: 28rpx;
	}
	
	.istarted_top{
		width: 100%;
		height: 100rpx;
	}
	
	.istarted_top_left{
		width: 75%;
		height: 100rpx;
		float: left;
	}
	
	.istarted_top_left_top{
		width: 100rpx;
		height: 100rpx;
		float: left;
		margin-right: 20rpx;
	}
	
	.istarted_top_left_top image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 10%;
	}
	
	.istarted_top_left_bottom{
		width: 70%;
		float: left;
	}
	
	.istarted_top_left_bottom_top{
		line-height: 50rpx;
	}
	
	.istarted_top_left_bottom_bottom{
		font-size: 26rpx;
		color: #999;
	}
	
	.istarted_top_right{
		float: left;
		font-size: 26rpx;
	}
	
	.istarted_top_right view{
		color: #1193E3;
		line-height: 60rpx;
	}
	
	.istarted_inthe_top{
		padding-top: 20rpx;
		// padding-bottom: 20rpx;
	}
	
	.istarted_inthe_bottom{
		width: 100%;
		height: 120rpx;
	}
	
	.istarted_inthe_bottom_top{
		width: 50%;
		float: left;
	}
	
	.istarted_inthe_bottom_bottom{
		width: 50%;
		float: left;
	}
	
	.istarted_inthe_bottom_top view{
		line-height: 58rpx;
		color: #999;
		font-size: 28rpx;
	}
	
	.istarted_inthe_bottom_bottom view{
		line-height: 58rpx;
		color: #999;
		font-size: 28rpx;
	}
	
	.istarted_bottom_1{
		width: 170rpx;
		background: #1193E3;
		color: #FFF;
		line-height: 52rpx;
		text-align: center;
		font-size: 26rpx;
		border-radius: 4rpx;
		float: right;
		margin-left: 10rpx;
		border: 1rpx solid #1193E3;
	}
	
	.istarted_bottom_2{
		width: 170rpx;
		background: #1193E3;
		color: #FFF;
		line-height: 52rpx;
		text-align: center;
		font-size: 26rpx;
		border-radius: 4rpx;
		float: right;
		margin-left: 10rpx;
	}
	
	.istarted_bottom{
		height: 64rpx;
	}
	
	.istarted_bottom_3{
		width: 128rpx;
		text-align: center;
		border-radius: 6rpx;
		border: 1rpx solid #09BB07;
		color: #09BB07;
		line-height: 52rpx;
		font-size: 26rpx;
		float: right;
		margin-left: 10rpx;
	}
	
	.istarted_bottom_3 image{
		width: 38rpx;
		height: 38rpx;
		margin-top: 6rpx;
		float: left;
		margin-left: 10rpx;
	}
	
	/* 分享样式 */
	
	  /* 按钮去掉边框 */
	  button::after {
		border: none;
	  }
	  button{
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #1c1c1c;
		font-size: 28rpx;
		background: none;
	  }
	  .button-hover {
		color:#1c1c1c;
		background:none;
	  }
	  /*每个页面公共css */
	.content {
		text-align: center;
		height: 100%;
	}
	.share-btn{
		padding: 30upx 60upx;
		background-color:red;
		color: #FFFFFF;
	}
	.share-pro{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 1000;
		line-height: 1;
		box-sizing: border-box;
		.share-pro-mask-share{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0);
		}
		.share-pro-mask{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}
		.share-pro-dialog-goods {
			width: 750rpx;
			height: 900rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				line-height: 50rpx !important;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
		
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
			
			}
		}
		
		.share-pro-dialog {
			width: 750rpx;
			height: 470rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;
			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;
				.share-colse{
					width: 40rpx;
					height: 40rpx;
				}
			}
			.share-pro-title {
				font-size: 30rpx !important;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				background-color: #FFFFFF;
				border-bottom: 1rpx solid #e8e8e8;
				font-weight: 450 !important;
			}
	
			.share-pro-body{
				display: flex;
				flex-direction: row;
				justify-content:space-around;
				font-size: 28rpx;
				color: #1c1c1c;
				padding-bottom: 30rpx;
				.share-item{
					display: flex;
					flex-direction:column;
					justify-content: center;
					justify-content:space-around;
					.share-pro-title-text{
						font-size: 30rpx;
						text-align: center;
					}
					.share-pro-title-text-des{
						font-size: 28rpx;
						color: #CCCCCC;
						padding-top: 15rpx;
					}
					.share-icon{
						text-align:center;
						width: 100rpx;
						height: 100rpx;
						color: #42ae3c;
						margin: 0px auto;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
					}
					&:nth-child(2){
						.share-icon{
							color: #ff5f33;
						}
					}
				}
			}
		}
	
		/* 显示或关闭内容时动画 */
	
		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}
		.closeCart {
			transition: all 0.3s ease-out;
			transform: translateY(900rpx);
		}
		.close {
			transition: all 0.3s ease-out;
			transform: translateY(470rpx);
		}
	
	}
	 .canvas{
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		display: block !important;
		width: 100% !important;
		height: 100% !important;
		z-index: 10;
	}
	
	.shareCancel{
		background: #f5f6f8;
		padding-top: 10rpx;
	}
	.shareCancelBut{
		background: #FFFFFF;
		text-align: center;
		font-size: 35rpx;
		
		font-weight: 450;
		padding: 20rpx 0px;
		
	}
	
	/* 分享样式 */
	
	/* 列表样式 */
	.content_view{
		background-color: #FFF;
	}
	
	.content_screen{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: fixed;
		top: 78rpx;
		background: #FFF;
		z-index: 999;
	}
	
	.content_type{
		width: 25%;
		text-align: center;
		float: left;
		font-size: 28rpx;
		color: #666;
	}
	
	.content_search_waikuang{
		position: fixed;
		top: 178rpx;
		z-index: 999;
		height: 80rpx;
		width: 100%;
		background-color: #FFF;
	}
	
	.content_search{
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		width: 90%;
		background-color: #F3F3F3;
		margin: 0 auto;
		border-radius: 5rpx;
	}
	
	.content_search input{
		height: 80rpx;
		line-height: 80rpx;
		width: 60%;
		text-align: left;
		padding-left: 10rpx;
		background: #F3F3F3;
		/* margin-top: 10rpx;
		margin: 0 auto; */
	}
	
	.search_image{
		width: 20px;
		height: 40rpx;
		float: left;
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	
	.sort_icon{
		width: 38rpx;
		height: 38rpx;
		float: right;
		margin-top: 30rpx;
		padding-right: 10rpx;
	}
	
	.sort_span{
		float: left;
		margin-left: 24rpx;
	}
	
	.content_list{
		// margin-top: 178rpx;
		width: 100%;
	}
	
	.frame{
		height: 200rpx;
		border-bottom: 1rpx solid #E8E8E8;
		width: 99%;
	}
	
	.frame_left{
		width: 26%;
		text-align: center;
		height: 100rpx;
		float: left;
	}
	
	.frame_left image{
		width: 130rpx;
		height: 130rpx;
		margin-top: 35rpx;
		border-radius: 10rpx;
	}
	
	.frame_right{
		width: 68%;
		float: left;
		padding-right: 10rpx;
	}
	
	.frame_right_top{
		width: 100%;
		height: 112rpx;
		line-height: 112rpx;
	}
	
	.frame_right_top_name{
		width: 55%;
		float: left;
		line-height: 112rpx;
		font-size: 30rpx;
	}
	
	.frame_right_top_time{
		width: 40%;
		float: right;
		font-size: 26rpx;
		text-align: right;
		padding-right: 24rpx;
		color: #999999;
		line-height: 112rpx;
	}
	
	.frame_right_bottom{
		width: 100%;
		// height: 88rpx;
		font-size: 30rpx;
	}
	
	// 海报
	.shareBtu{
		background: #FFFFFF !important;
		border: 2rpx solid #0A8FE2 !important;
		border-radius: 10rpx !important;
		color: #0A8FE2 !important;
		text-align: center !important;
		width: 100%;
		padding: 10rpx 0rpx !important;
		font-weight: 500 !important;
		font-size: 35rpx !important;
	}
	.hideCanvasView {
		position: relative;
	}
	
	.hideCanvas {
		position: fixed;
		top: -99999upx;
		left: -99999upx;
		z-index: -99999;
	}
	
	.flex_row_c_c {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.modalView {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		outline: 0;
		transform: scale(1.2);
		perspective: 2500upx;
		background: rgba(0, 0, 0, 0.6);
		transition: all .3s ease-in-out;
		pointer-events: none;
		backface-visibility: hidden;
		z-index: 999;
	}
	
	.modalView.show {
		opacity: 1;
		transform: scale(1);
		pointer-events: auto;
		z-index: 999999;
	}
	
	.flex_column {
		display: flex;
		flex-direction: column;
	}
	
	.backgroundColor {
		// background-color: #FFF;
		z-index: 9999;
	}
	
	.border_radius_10px {
		border-radius: 5px;
	}
	
	.padding1vh {
		// padding: 2vh;
	}
	
	.posterImage {
		width: 74vw;
		border-radius: 10rpx;
		// height: 490.556px;
	}
	
	.flex_row {
		display: flex;
		flex-direction: row;
	}
	
	.marginTop2vh {
		margin-top: 2vh;
		
	}
	// 海报
</style>